import { useEffect, useState } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import axios from 'axios'

const Login = () => {
  const [codeData, setCodeData] = useState<any>()
  const [params, setParams] = useState<any>({})

  // 表单提交的情况
  const onFinish = (values: any) => {
    setParams({ ...values, codeId: codeData.codeId })
  }

  useEffect(() => {
    if (params.codeId) {
      console.log(params, 'data')
      getLogin()
    }
  }, [params])

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  useEffect(() => {
    getLoginCode()
  }, [])

  const getLoginCode = async () => {
    const res = await axios.get('/users/loginCode')
    const data = res.data.data
    // 设置svg图片 图片id
    setCodeData({ codeId: data.insertId, svg: data.data })
  }
  const getLogin = async () => {
    const data = await axios.post('/users/login', params)
    console.log('data:', data)
  }

  return (
    <>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item name="text" wrapperCol={{ offset: 8, span: 16 }}>
          <Input style={{ width: 150 }} />
        </Form.Item>
        <Form.Item name="img-code" wrapperCol={{ offset: 8, span: 16 }}>
          {/* dangerouslySetInnerHTML: 设置标签  因为svg图片是一个标签*/}
          <div
            style={{ width: 100, height: 50 }}
            dangerouslySetInnerHTML={{ __html: codeData?.svg }}
          ></div>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default Login
